<template>
    <div class="log-menu-open" v-if="!show" @click="show = !show">
        <div class="title-font">{{ $t('components.intradayData.63cwnibmnno0') }}</div>
    </div>
    <div class="log-menu" v-else>
        <div class="title">
            <div class="title-font">{{ $t('components.intradayData.63cwnibmnno0') }}</div>
            <div class="more-box">
                <div @click="getDataReadAll">{{ $t('components.intradayData.63cwnibmouc0') }}</div>
                <div>|</div>
                <!-- <div @click="toSpectRecord">{{ $t('components.intradayData.63cwnibmp500') }}</div> -->
                <div class="delete"><icon-close @click="show = !show" /></div>
            </div>
        </div>
        <div class="log-table wrap">
            <div class="log-table-title">
                <div class="time">{{ $t('components.intradayData.63cwnibmpa40') }}</div>
                <div class="model">{{ $t('components.intradayData.63cwnibmpe80') }}</div>
                <div class="uav-num">{{ $t('components.intradayData.63cwnibmphs0') }}</div>
                <div class="name">{{ $t('components.intradayData.63cwnibmplc0') }}</div>
                <div class="tel">{{ $t('components.intradayData.63cwnibmpok0') }}</div>
                <div class="declare-status">{{ $t('components.intradayData.63cwnibmps40') }}</div>
                <div class="type">{{ $t('components.intradayData.63cwnibmpv80') }}</div>
                <div class="operate">{{ $t('components.intradayData.63cwnibmpyc0') }}</div>
                <!-- <div class="dispose-status">是否处理</div> -->
            </div>
            <ul class="info-list-scroll">
                <li v-for="(item, index) in (form.list as any)" :key="index">
                    <div class="time">{{ item.createTime ? dayjs.unix(item.createTime).format('HH:mm:ss') : '-' }}</div>
                    <div class="model">{{ useIdModelFormat(item.uavBasic.id).name }}</div>
                    <a-popover
                        :arrow-style="{ border: '1px solid rgba(46, 116, 255, 0.8)', borderTop: 'unset !important', borderLeft: 'unset !important' }">
                        <div class="uav-num text-ellipsis" style="width: 140px;"><span class="uav-num text-ellipsis">{{
                            item.whiteUav.uavNum ? item.whiteUav.uavNum :
                                $t('components.intradayData.63cwnibmq240') }}</span></div>
                        <template #content>
                            <div class="operate-demo">
                                <p style="color: #fff;"><span>{{ item.whiteUav.uavNum ? item.whiteUav.uavNum :
                                    $t('components.intradayData.63cwnibmq240') }}</span></p>
                            </div>
                        </template>
                    </a-popover>
                    <div class="name">{{ item.whiteUav.customerName ? item.whiteUav.customerName :
                        $t('components.intradayData.63cwnibmq500') }}</div>
                    <a-popover
                        :arrow-style="{ border: '1px solid rgba(46, 116, 255, 0.8)', borderTop: 'unset !important', borderLeft: 'unset !important' }">
                        <div class="tel text-ellipsis" style="width: 120px;"><span class="tel text-ellipsis">{{
                            item.whiteUav.mobile ?
                                item.whiteUav.mobile : $t('components.intradayData.63cwnibmq500') }}</span></div>
                        <template #content>
                            <div class="operate-demo">
                                <p style="color: #fff;"><span>{{ item.whiteUav.mobile ? item.whiteUav.mobile :
                                    $t('components.intradayData.63cwnibmq500')
                                        }}</span></p>
                            </div>
                        </template>
                    </a-popover>
                    <div class="declare-status">
                        <img src="@/assets/images/declare-status-wanzhou2.png" v-if="item.whiteUav.state == 0"
                            class="unagree">
                        <img src="@/assets/images/declare-status-wanzhou1.png" v-else class="agree">
                    </div>
                    <div class="type">{{ item.whiteUav.suffix ? item.whiteUav.suffix :
                        $t('components.intradayData.63cwnibmq500') }}</div>
                    <div class="operate" @click="playback(item)">{{ $t('components.intradayData.63cwnibmqek0') }}</div>
                    <!-- <a-popover
                        :arrow-style="{ border: '1px solid rgba(46, 116, 255, 0.8)', borderTop: 'unset !important', borderLeft: 'unset !important' }">
                        <div class="uav-num text-ellipsis" style="width: 90px;"><span class="uav-num text-ellipsis">{{
                            item.whiteUav.uavNum ? item.whiteUav.uavNum :
                                $t('components.intradayData.63cwnibmq240')}}</span></div>
                        <template #content>
                            <div class="operate-demo">
                                <p style="color: #fff;"><span>{{ item.whiteUav.uavNum ? item.whiteUav.uavNum :
                                    $t('components.intradayData.63cwnibmq240') }}</span></p>
                            </div>
                        </template>
                    </a-popover> -->
                    <!-- <div class="point">起飞点--降落点</div> -->
                    <!-- <a-popover
                        :arrow-style="{ border: '1px solid rgba(46, 116, 255, 0.8)', borderTop: 'unset !important', borderLeft: 'unset !important' }">
                        <div class="content text-ellipsis" style="width: 60px;"><span class="content text-ellipsis">{{
                            item.whiteUav.customerName ? item.whiteUav.customerName : $t('components.intradayData.63cwnibmq500') }}</span></div>
                        <template #content>
                            <div class="operate-demo">
                                <p style="color: #fff;"><span>{{ item.whiteUav.customerName ? item.whiteUav.customerName
                                        : $t('components.intradayData.63cwnibmq500') }}</span></p>
                            </div>
                        </template>
                    </a-popover> -->
                    <!-- <div class="dispose-status">
                        <span v-if="item.whiteUav.status == 0" class="unagree">{{$t('components.intradayData.63cwnibmqhk0')}}</span>
                        <span v-else class="agree">{{$t('components.intradayData.63cwnibmqkw0')}}</span>
                    </div> -->
                </li>
                <cIndexNone v-if="!form.list?.length"></cIndexNone>
            </ul>
            <div class="pagination" v-if="form.count">
                <a-pagination :total="form.count"  v-model:current="form.data.page" :page-size="form.data.pageSize" @change="getData" simple/>
            </div>
        </div>
    </div>
</template>
<script lang='ts' setup>
import { apiRecordList, apiRecordRead } from '@/api/record'
import { useIdModelFormat } from "@/hooks/comparison";
import dayjs from 'dayjs'
const show = ref(true)
const local = useLocal()
const router = useRouter()
const form = reactive({
    data: {
        isRead: 2,
        page: 1,
        pageSize: 20,
        startTime: dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
        uid: local.usermsg.id == 3 ? 0 : local.usermsg.id
    },
    loading: false,
    list: [],
    detailReadAll: {},
    count: 0
})
// 无人机侦测记录列表
const getData = async () => {
    const { code, data } = await apiRecordList({
        ...form.data,
        startTime: Number(dayjs(form.data.startTime).format('X')),
        endTime: Number(dayjs(form.data.endTime).format('X')),
    })
    if (code != 200) return;
    form.list = data.list
    form.count = data.total
}
// 通知阅读
// const getDataRead = async (_item: any) => {
//   const { code, data } = await apiNoticeRead({
//     ...form.detailRead,
//   })
//   if (code != 200) return;
//   form.detailRead = data
//   useMessage.success()
//   getData()
// }
const getDataReadAll = async () => {
    form.loading = true
    const { code } = await apiRecordRead({
        isAll: 1
    })
    if (code != 200) return;
    form.loading = false
    getData()
    // console.log(form.detailReadAll)
}
onMounted(() => {
    getData()
})
const playback = (item: any) => {
    router.push({
        name: 'remoteIdSpectRecord',
        query: {
            deviceSn: item.uavBasic.id,
            startTime: item.startTime,
            endTime: item.endTime,
        },
    })
}
// const toSpectRecord = () => {
//     router.replace('/spectRecord')
// }
</script>
<style scoped lang="less">
.log-menu-open {
    // margin: 20px;
    width: 160px;
    height: 60px;
    background-image: url('@/assets/images/hidden-wanzhou.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-radius: 5px;
    border: 1px solid rgba(46, 116, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;

    .title-font {
        font-family: YouSheBiaoTiHei;
        opacity: 1;
        /** 文本1 */
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 0.48px;
        line-height: 24px;
        vertical-align: middle;
        background-image: -webkit-linear-gradient(bottom, rgb(153 218 252), #ffffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.log-menu {
    width: 600px;
    height: 428px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    color: #fff;
    border-radius: 5px;

    .title {
        width: 100%;
        height: 59px;
        background-image: url('@/assets/images/index-menue-title.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title-font {
            margin-left: 10px;
            font-family: YouSheBiaoTiHei;
            opacity: 1;
            /** 文本1 */
            font-size: 24px;
            font-weight: 500;
            letter-spacing: 0.48px;
            line-height: 24px;
            vertical-align: middle;
            background-image: -webkit-linear-gradient(bottom, rgb(153 218 252), #ffffff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }



        .more-box {
            width: 80px;
            cursor: pointer;
            font-weight: 600;
            color: rgba(75, 127, 239, 1);
            display: flex;
            justify-content: space-around;
            margin-right: 20px;
        }

        // .delete {
        //     width: 35px;
        //     cursor: pointer;
        //     font-weight: 600;
        //     color: rgba(75, 127, 239, 1);
        // }
    }

    .log-table {
        background: rgba(15, 19, 41, 0.85);
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;

        .log-table-title {
            border: 1px solid rgba(46, 116, 255, 0.8);
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px;

            .time {
                width: 66px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
            }

            .model {
                width: 130px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .uav-num {
                width: 85px;
                // display: flex;
                font-size: 12px;
                align-items: center;
                justify-content: center;
            }

            .name {
                width: 60px;
                display: flex;
                font-size: 11px;
                align-items: center;
                justify-content: center;
            }

            .tel {
                width: 80px;
                display: flex;
                font-size: 12px;
                align-items: center;
                justify-content: center;
            }

            .declare-status {
                width: 90px;
                display: flex;
                font-size: 12px;
                align-items: center;
                justify-content: center;
            }

            .type {
                width: 60px;
                display: flex;
                font-size: 12px;
                align-items: center;
                justify-content: center;
            }

            .operate {
                // flex: 1;
                width: 60px;
                display: flex;
                font-size: 12px;
                align-items: center;
                justify-content: center;
            }

        }

        .info-list-scroll {
            flex: 1;
            overflow: auto;
            border: 1px solid rgba(46, 116, 255, 0.8);

            li {
                flex: 1;
                overflow: auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 11.5px 4px 6px 1.5px;
                font-size: 12px;

                .time {
                    width: 80px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                }

                .model {
                    width: 150px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .uav-num {
                    width: 100px;
                    // display: flex;
                    font-size: 12px;
                    align-items: center;
                    justify-content: center;
                }

                .name {
                    width: 60px;
                    display: flex;
                    font-size: 12px;
                    align-items: center;
                    justify-content: center;
                }

                .tel {
                    width: 100px;
                    // display: flex;
                    font-size: 12px;
                    align-items: center;
                    justify-content: center;
                }

                .declare-status {
                    width: 86px;
                    display: flex;
                    font-size: 12px;
                    align-items: center;
                    justify-content: center;

                    img {
                        width: 14px;
                        height: 14px;
                    }
                }

                .type {
                    width: 90px;
                    display: flex;
                    font-size: 12px;
                    align-items: center;
                    justify-content: center;
                }

                .operate {
                    // flex: 1;
                    width: 60px;
                    font-size: 12px;
                    color: #0099FF;
                    text-align: center;
                }

                .text-ellipsis {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    text-align: center;
                }


                .dispose-status>.agree {
                    color: #1BCC00;
                }

                .declare-status>.agree {
                    color: #1BCC00;
                }

                .declare-status,
                .dispose-status>.unagree {
                    color: #FF0A0A;
                }
            }
        }
    }
}
.pagination{
    display: flex;
    justify-content: flex-end;
    padding: 2px;
    :deep(.arco-pagination-jumper){
        .arco-input-wrapper{
            background: rgba(36, 41, 68, 1);
            color: #ffffff;
        }
        .arco-pagination-jumper-separator{
            color: #ffffff;
        }
        .arco-pagination-jumper-total-page{
            color: #ffffff;
        }

    }
}
</style>